<template>
    <div class="Liveclassroom">
        <div>
            <div class="toliebiao" style="margin-left:-10px;" @click="toliebiao(1)">
                <h2>私教</h2>  
                <span>附近私教 / 热门私教 / 上门私教 / 线上私教</span>
            </div>
            <div class="toliebiao" style="margin-left:21px;" @click="toliebiao(2)">
                <h2>机构</h2>  
                <span>附近机构 / 热门机构 / 公会 / 线下体验课</span>
            </div>
        </div>
        
        <img src="/images/客户端下载 拷贝.png" @click="goDonwload()" style="cursor: pointer;"/>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div  class="swiper-slide">
                    <img src="/images/活动banner轮播 拷贝@2x.png" class="Live-banner"/> 
                </div>
                <div  class="swiper-slide">
                    <img src="/images/活动banner轮播 拷贝@2x (1).png" class="Live-banner"/> 
                </div>
            </div><!-- 如果需要分页器 -->
	        <div class="swiper-pagination" style="top:130px;left:520px;"></div>
        </div>
        <div class="Live-con">
             <div class="Live-con-content">
                    <ul>
                        <li v-for="(item,index) in LearncardList" :key="index" @click="ChecketList(index)" :class="LearncardListindex == index?'select':''">
                            {{item}}
                        </li>
                    </ul>
                </div>
            <div class="Live-con-con" v-if="LearncardListindex == 0">
               
                <div class="Live-con-con-head">
                    <span>我的学习卡</span>
                    
                </div>
                <div class="Live-con-con-Lecd">
                    <ul>
                        <li>
                            <div class="Live-con-con-Lecd-div">
                                <span>直播课程点卡</span>
                                <div>
                                    <label>剩余分钟<span>{{minute_count}}</span></label>
                                    <label><span style="font-size: 14px;color: #ccc;position: absolute;top: -12px;right: 31px;">{{minute_count_expire_time}}过期</span></label>
                                    <label class="Live-buy" @click="goshop('cards')"><span>购买点卡</span></label>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="Live-con-con-Lecd-div">
                                <span>直播课程次卡</span>
                                <div>
                                    <label>剩余次数<span style="margin-left: 43px;">{{curriculum_count}}</span></label>
                                    <label><span style="font-size: 14px;color: #ccc;position: absolute;top: -12px;right: 31px;">{{curriculum_count_expire_time}}过期</span></label>
                                    <label class="Live-buy" @click="goshop('card')"><span>购买次卡</span></label>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="Live-con-con-appointment">
                    <div class="Live-con-con-appointment-head">
                        <span>我的订阅</span>
                        <span></span>
                        <!-- <span>更多>></span> -->
                    </div>
                    <div class="Live-con-con-appointment-con">
                        <div v-if="appointmentList.length == 0" class="nodatads">
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无订阅课程</span>
                        </div>
                        <ul v-else>
                            <li v-for="(item,index) in appointmentList" :key="index" @click="Todetials(item)">
                                <div class="Personalschedule-class-List-content">
                                    <label>
                                        <img :src="item.map.groupinfo.faceUrl" v-if="item.map.groupinfo!=undefined" alt="">
                                    </label>
                                    <label class="Personalschedule-class-Info">
                                        <label class="Personalschedule-class-info-head">
                                            <span>{{item.title}}</span>
                                        </label>
                                        <label class="Personalschedule-class-Infos">
                                            <img src="/images/视频直播icon@2x.png" v-if="item.classroom_type == 'online_video'"/>
                                            <img src="/images/语音直播@2x.png" v-else/>
                                            <span v-if="item.map.groupinfo!=undefined">{{item.map.groupinfo.group_name}}</span>
                                        </label>
                                         <label v-if="item.map.groupinfo!=undefined">
                                            <span>{{item.map.groupinfo.language_level}}</span>
                                            <span>{{item.map.groupinfo.language}}</span>
                                        </label>
                                        <label>
                                            <span>{{item.create_time}}</span>
                                            <span>{{item.start_time}}-{{item.end_time}}</span>
                                        </label>
                                        <label class="Isopenclasses">
                                            <span @click.stop="unsubscribe(item.id)">取消订阅</span>   
                                            <span @click.stop="GoInfo(item)">进入班级</span>
                                        </label>
                                    </label>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="Live-con-con-Focus">
                    <div class="Live-con-con-Focus-head">
                        <span>我的关注</span>
                        <span></span>
                        <!-- <span>更多>></span> -->
                    </div>
                    <div class="Live-con-con-Focus-con">
                        <ul v-if="FocusList.length == 0" class="Summarylist-content">
                            <div  class="Summarylist-nodatads">
                                <label>
                                    <img src="/images/圆角矩形 523@2x.png" alt="">
                                    <span>暂无关注</span>
                                </label>
                            </div>
                        </ul>
                        <ul>
                            <li v-for="(item,index) in FocusList" :key="index" @click="toDetails(item)">
                                <img :src="item.map.userinfo.avatar"/>
                                <label>
                                    <span>{{item.map.userinfo.nick_name}}</span>
                                    <span>{{item.map.userinfo.country}}·{{item.map.userinfo.city}}</span>
                                    <span class="Canceltheattention" @click.stop="Canceltheattention(item.master_id)">取消关注</span>
                                </label>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="Live-con-con" v-else-if="LearncardListindex == 1">
                <div class="Learnerscard">
                    <label class="Learnerscard-title">
                        <span>我的学习卡</span>
                    </label>
                    <ul class="Learnerscard-content" v-if="LearnerscardInfoList.length !== 0">
                        <li v-for="(item,indxx) in LearnerscardInfoList" :key="indxx">
                            <label>
                                <span >{{item.type}}</span>
                                <!-- <span v-if="!item.isShop">未购买</span> -->
                            </label>
                            <label>
                                <span>剩余课时{{item.course_num}}</span>
                            </label>
                            <label>
                                <span v-if="item.isguoqi" style="color: #ccc;font-size: 10px;line-height: 20px;position: absolute;width: 164px;top: -71px;left: 110px;">{{item.time}}过期</span>
                                <span v-if="!item.isguoqi" style="position: absolute;top: -74px;left: 130px;">已过期</span>
                                <span @click="goBuyLearnCard(item.type)" style="margin-left: 80px;">立即购买</span>
                            </label>
                        </li>
                        <li class="holder" v-for="(i,indax) in holder" :key="indax"></li>
                    </ul>
                </div>
                <div class="More-rest">
                    <div class="Summarylist">
                        <label>
                            <span>总结列表</span>
                            <span></span>
                            <!-- <span>更多>></span> -->
                        </label>
                        <ul v-if="Summarylists.length == 0" class="Summarylist-content">
                            <div  class="Summarylist-nodatads">
                                <label>
                                    <img src="/images/圆角矩形 523@2x.png" alt="">
                                    <span>暂无总结</span>
                                </label>
                            </div>
                        </ul>
                        <ul class="Summarylist-content" v-else>
                            <li v-for="(item,index) in Summarylists" :key="index">
                                <label>
                                    <span>{{item.title}}</span>
                                    <span>{{item.timers}}</span>
                                </label>
                            </li>
                        </ul>
                    </div>
                    <div class="Mycomments">
                        <label>
                            <span>我的评论</span>
                            <span></span>
                            <!-- <span>更多>></span> -->
                        </label>
                        <ul v-if="Commentlist.length == 0" class="Summarylist-content">
                            <div  class="Summarylist-nodatads">
                                <label>
                                    <img src="/images/圆角矩形 523@2x.png" alt="">
                                    <span>暂无评论</span>
                                </label>
                            </div>
                        </ul>
                        <ul class="comments-Infos" v-else>
                            <li class="comments-Infos-content" v-for="(item,index) in Commentlist" :key="index">
                                <!-- <h3>{{item.map.masterAppointmentInfo.title}}</h3> -->
                                <label class="comments-Infos-content-head">
                                    <img :src="item.map.userinfo.avatar" alt="" class="coverimg">
                                    <h4>{{item.map.userinfo.nick_name}}</h4>
                                    <span>{{item.create_time}}</span>
                                    <p>{{item.content}}</p>
                                </label>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="Myteacher">
                    <div class="Live-con-con-Focus-head">
                        <span>我的老师</span>
                        <span></span>
                        <!-- <span>更多>></span> -->
                    </div>
                    <div class="Live-con-con-Focus-con">
                        <ul v-if="Myteacherlist.length == 0" class="Summarylist-content">
                            <div  class="Summarylist-nodatads">
                                <label>
                                    <img src="/images/圆角矩形 523@2x.png" alt="">
                                    <span>暂无老师</span>
                                </label>
                            </div>
                        </ul>
                        <ul>
                            <li v-for="(item,index) in Myteacherlist" :key="index" @click="toDetails(item)">
                                <img :src="item.map.userinfo.avatar"/>
                                <label>
                                    <span>{{item.map.userinfo.nick_name}}</span>
                                    <span>{{item.map.userinfo.country}}·{{item.map.userinfo.city}}</span>
                                    <span class="Canceltheattention" @click.stop="Canceltheattention(item.master_id)">取消关注</span>
                                </label>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="Live-footer">
            <img src="/images/新手指导教程.png"/>
        </div>
    </div>
</template>
<script>
import Swiper from 'swiper' 
import 'swiper/css/swiper.css';
export default {
    name:'Liveclassroom',
    computed:{
        holder(){
            return 4 -(this.LearnerscardInfoList.length%5)
        }
    },
    data(){
        return{
            curriculum_count_expire_time:'',
            minute_count_expire_time:'',
            LearncardList:['直播学习卡','助学师学习卡'],
            LearncardListindex:0,
            appointmentList:[
                // {
                //     cover:'/images/图层 8@2x.png',
                //     classname:'话题/学习教育',
                //     type:'视频直播',
                //     nick_name:'可口可乐',
                //     data:'2020-05-15',
                //     timers:'14:00-14:30',
                //     Isclassopen:true
                // },
                // {
                //     cover:'/images/图层 8@2x.png',
                //     classname:'话题/学习教育',
                //     type:'视频直播',
                //     nick_name:'可口可乐',
                //     data:'2020-05-15',
                //     timers:'14:00-14:30',
                //     Isclassopen:true
                // },
            ],
            FocusList:[],
            userinfo:JSON.parse(localStorage.getItem('userinfo')),
            curriculum_count:'',
            minute_count:'',
            languageEn:[
                {"Estonian":"爱沙尼亚语"},
				{"Arabic":"阿拉伯语"},
				{"Bulgarian":"保加利亚语"},
				{"polish":"波兰语"},
				{"Danish":"丹麦语"},
				{"German":"德语"},
				{"Russian":"俄语"},
				{"Traditional Chinese":"繁体中文"},
				{"French":"法语"},
				{"Finnish":"芬兰语"},
				{"Korean":"韩语"},
				{"Dutch":"荷兰语"},
				{"Czech":"捷克语"},
				{"romanian":"罗马尼亚语"},
				{"Portuguese":"葡萄牙语"},
				{"Japanese":"日语"},
				{"Swedish":"瑞典语"},
				{"slovenian":"斯洛文尼亚语"},
				{"Thai":"泰语"},
				{"Spanish":"西班牙语"},
				{"Greek":"希腊语"},
				{"hun":"匈牙利语"},
				{"Italian":"意大利语"},
				{"English":"英语"},
				{"Vietnamese":"越南语"},
				{"cantonese":"粤语"},
				{"Chinese":"中文"}
            ],
            weekDay : ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
            LearnerscardInfoList:[],
            Summarylists:[
                {
                    title:'话题/学习教育',
                    timers:'2020-05-22  15:00-15:30'
                },
                {
                    title:'话题/学习教育',
                    timers:'2020-05-22  15:00-15:30'
                },
                {
                    title:'话题/学习教育',
                    timers:'2020-05-22  15:00-15:30'
                },
                {
                    title:'话题/学习教育',
                    timers:'2020-05-22  15:00-15:30'
                },
            ],
            Myteacherlist:[],
            Commentlist:[]
        }
    },
    mounted() {
        new Swiper('.swiper-container', {//初始化swiper轮播图
		    loop: true, // 循环模式选项
            pagination: {//绑定分页器
                el: '.swiper-pagination',
                clickable: true,
                modifierClass : 'my-pagination-',
            },
            autoplay: {//设置自动切换时间
                delay: 4000,
            },
            // paginationElement  : 'li'
            
        })
    },
    created(){
        this.GetMyreservation()
        this.Myattention()
        this.Querystudycard()
        this.GetMyteacher()
        this.Summarylist()
        this.AppointmentList()
        // this.GetLearncardInfo()
        this.getzhuxueshilearnCard()
    },
    methods:{
        compareDate(cpmpareD,nowdate) {//F 过去，T 未来
            var nowdate = new Date(nowdate);
            var cpmpareD = new Date(cpmpareD);
            if (nowdate.getTime() > cpmpareD.getTime()) {
                return true;
            } else {
                return false;
            }
        },
        getzhuxueshilearnCard(){
            let nowdate = new Date()
            let data = {
                user_id:this.userinfo.user_id,
            }
            this.$axios({
                methods:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userStudyCard/queryStudyCore',
                params:data,
            }).then((res)=>{
                console.log(res.data.data,'助学师学习卡信息a')
                // this.LearnerscardInfoList = res.data.data
                
                res.data.data.map(item=>{
                    var a = {}
                    if(item.type=='private_education'){
                        a.type = '私教'
                        a.isguoqi = this.compareDate(nowdate,item.end_time)
                        a.time = item.end_time.substr(0,10)
                        a.course_num = item.course_num
                        this.LearnerscardInfoList.push(a)
                    }else if(item.type == 'mother_tongue'){
                        a.type = '母语助学师'
                        a.isguoqi = this.compareDate(nowdate,item.end_time)
                        a.time = item.end_time.substr(0,10)
                        a.course_num = item.course_num
                        this.LearnerscardInfoList.push(a)
                    }else if (item.type == 'cross_border'){
                        a.type = '跨境助学师'
                        a.isguoqi = this.compareDate(nowdate,item.end_time)
                        a.time = item.end_time.substr(0,10)
                        a.course_num = item.course_num
                        this.LearnerscardInfoList.push(a)
                    }else if (item.type == 'major'){
                        a.type = '专业助学师'
                        a.isguoqi = this.compareDate(nowdate,item.end_time)
                        a.time = item.end_time.substr(0,10)
                        a.course_num = item.course_num
                        this.LearnerscardInfoList.push(a)
                    }
                })
                console.log(this.LearnerscardInfoList)
            }).catch((err)=>{
                console.log(err)
            })
        },
        toliebiao(index){
            if(index == 1){
                this.$router.push({ path:'/views/sijiaoList'})
            }else if (index == 2){
                this.$router.push({ path:'/views/Listofinstitutions',query: {index:8,}})
            }
        },
        toDetails(e){
            console.log('跳转到个人详情',e.map.userinfo.user_id)
            this.$router.push({path:'/views/Teachingcenters/Teachersdetails',query: {userid: e.map.userinfo.user_id}})
        },
        ChecketList(e){//这是选择学习卡的方法
            console.log('选项卡切换')
            console.log(e)
            this.LearncardListindex =e
        },
        Todetials(item){//进入课堂详情
            console.log(item)
            this.$router.push({path:'/views/Teachingcenters/Teachingcentercoursedetails',query: {id: item.map.masterAppointmentEntity.id}})
        },
        GoInfo(item){//直播讲师进入班级
            console.log(item)
            this.$router.push({path:'/views/Learningcenter/Classdetails',query: {id: item.map.groupinfo.id}})
        },
        goDonwload(){
            this.$router.push({path:'/views/Download'})
        },
        GetMyteacher(){//获取我的老师列表
            var data = {
                currentPage:1,
                pageSize:5,
                master_type:'private_education',
                user_id : this.userinfo.user_id,
            }
            this.$axios({
                methods:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userAppointment/queryTeacherListPage',
                params:data,
            }).then((res)=>{
                console.log(res.data.data,'我的老师列表')
                this.Myteacherlist = res.data.data
            }).catch((err)=>{
                console.log(err)
            })
        },
        GetMyreservation(){
            var data ={
                currentPage : 1,
                pageSize : 2,
                type : "open_class",
                user_id : this.userinfo.user_id
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userClass/queryUserClassSchedule',
                params:data,
            }).then((response) =>{
                console.log(response.data.data,'我的课程22送式神')
                this.appointmentList =response.data.data
                this.appointmentList.forEach(e=>{
                    var stars = e.start_time
                    var entimes = e.end_time
                    var times = stars.substring(0, stars.indexOf(' '))//截取当前日期
                    var starttime =  stars.substring(11, 16)//截取开始时间
                    var endtime =  entimes.substring(11, 16)//截取结束时间
                    var myDate = new Date(Date.parse(times)); 
                    e['fileds'] = this.weekDay[myDate.getDay()]//判断时间是周几
                    e['create_time'] = times
                    e['start_time'] = starttime
                    e['end_time'] = endtime
        
                    if(e.map.masterAppointmentEntity !=undefined){
                        if(e.map.masterAppointmentEntity.language_level == 'Zero basis'){
                            e.map.groupinfo['language_level'] = '零基础'
                        }else if(e.map.masterAppointmentEntity.language_level == 'Intermediate'){
                            e.map.groupinfo['language_level'] = '中级'
                        }else if(e.map.masterAppointmentEntity.language_level == 'Primary'){
                            e.map.groupinfo['language_level'] = '初级'
                        }else if(e.map.masterAppointmentEntity.language_level == 'Intermediate'){
                            e.map.groupinfo['language_level'] = '中级'
                        }
                        this.languageEn.forEach(function(j){
                        if(j[e.map.groupinfo['language']]){
                            e.map.groupinfo['language']=j[e.map.groupinfo['language']]
                        }   
                        })
                    } 
                })
            }).catch((error) =>{
                console.log(error)
            })
        },
        Myattention(){//获取我的关注
            var data ={
                currentPage : 1,
                pageSize : 5,
                user_id : this.userinfo.user_id,
                type:'live',
                status:1,
            }
            this.$axios({
                methods:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterFollow/queryListPage',
                params:data,
            }).then((res)=>{
                this.FocusList = res.data.data
            }).catch((err)=>{
                console.log(err)
            })
        },
        Canceltheattention(master_id){//取消关注
            var data = {
                master_id:master_id,
                user_id : this.userinfo.user_id,
            }
            this.$axios({
                methods:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterFollow/deleteFollow',
                params:data,
            }).then((res)=>{
                console.log(res.data.message)
                alert("取消关注"+res.data.message)
                location.reload();
            }).catch((err)=>{
                console.log(err)
            })
        },
        Querystudycard(){//学习卡查询
            var data ={
                user_id : this.userinfo.user_id
            }
            this.$axios({
                method: "post",
                url: "http://101.37.66.151:8768/eg-api/user/classcard/queryMyClassCard",
                data: data
            }).then(res => {
                console.log(res.data.data,'我的学习卡啊')
                var mylist = res.data.data
                mylist.forEach(element => {
                    if(element.type == 'curriculum'){
                        this.curriculum_count_expire_time = element.map.userClassCard[0].expire_time.substr(0,10)
                        this.curriculum_count = element.map.userClassCard[0].curriculum_num
                    }else if(element.type = 'minute'){
                        this.minute_count_expire_time = element.map.userClassCard[0].expire_time.substr(0,10)
                        this.minute_count = element.map.userClassCard[0].minute_num
                    }
                });
                console.log(
                    this.curriculum_count_expire_time ,
                    this.curriculum_count,
                    this.minute_count_expire_time,
                    this.minute_count
                )
            }).catch(error => {
                console.log(error); //请求失败返回的数据
            });
        },
        unsubscribe(id){//取消订阅
            var data ={
                id : id,
            }
            this.$axios({
                methods:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userClass/delete',
                params:data,
            }).then((res)=>{
                console.log(res,'我的学习卡啊')
                if(res.data.code ==0){
                    alert("取消订阅成功")
                    location.reload();
                }
            }).catch((err)=>{
                console.log(err)
            })
        },
        goshop(e){//直播点卡时长购买
            if(e == 'cards'){
                this.$emit('fromChild', false)
                this.$router.push({path:'/views/Learningcenter/Livebroadcastcardpurchase'})
            }else if(e == 'card'){
                this.$emit('fromChild', false)
                this.$router.push({path:'/views/Learningcenter/Pointcard'})
            }
            
        },
        goBuyLearnCard(e){
            console.log(e)
            this.$emit('fromChild', false)
            this.$router.push({path:'/views/Learningcenter/buyHelpLearnCard',query: { title: e }})
            
        },
        Summarylist(){//总结列表
            var data ={
                currentPage :1,
                pageSize :4,
                status:3,
                user_id:this.userinfo.user_id
            }
            this.$axios({
                methods:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userAppointment/querySummaryListPage',
                params:data,
            }).then((res)=>{
                console.log(res.data.data,'总结列表')
                this.Summarylists = res.data.data
            }).catch((err)=>{
                console.log(err)
            })
        },
        AppointmentList(){//我的评论列表
            var data ={
                currentPage :1,
                pageSize :10,
                parent_id:0,
                user_id:this.userinfo.user_id
            }
            this.$axios({
                methods:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterComment/queryListPage',
                params:data,
            }).then((res)=>{
                console.log(res.data.data,'评论列表')
                this.Commentlist = res.data.data
            }).catch((err)=>{
                console.log(err)
            })
        },
        GetLearncardInfo(){//我的学习卡信息
            var data ={
                status:2,
                user_id:this.userinfo.user_id
            }
            this.$axios({
                methods:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userStudyCard/queryStudyCore',
                params:data,
            }).then((res)=>{
                console.log(res.data.data,'我的学习卡')

                // this.Commentlist = res.data.data
            }).catch((err)=>{
                console.log(err)
            })
        }
    },
     
}
</script>
<style lang="less" scoped>
    .toliebiao{
        background: url('/images/组 11 拷贝@2x.png') no-repeat center center;
        background-size: 100% 100%;
        width: 49%;
        position: relative;
        top: 10px;
        left: 10px;
        display: inline-block;
        margin-bottom: 23px;
        text-align: center;
        color: #47cecf;
        height: 139px;
        font-weight: bold;
        cursor: pointer;
    }
    .Liveclassroom{
        width: 100%;
        img{
            width: 100%;
            height: 100%;
        }
        .Live-banner{
            margin-top: 10px;
            margin-bottom: 10px;
        }
    }
    .Live-con{
        width: 100%;
        height: auto;
        background: #ffffff;
        border-radius: 15px;
    }
    .Live-footer{
        margin-top: 12px;
    }
    .Live-nav{
        color: black;
        ul{
            position: relative;
            width: 90%;
            height: 30px;
            margin: 0 auto;
            padding: 0;
            align-items: center;
            list-style: none;
            display: flex;
            padding-top: 20px;
            text-align: right;
            justify-content: flex-end;
            li{
                height: 100%;
                text-align: center;
                margin-left: 4%;
                cursor: pointer;
            }
        }
    }
    .tochecket{
        color: #2DC7C8;
        border-bottom: 2px solid #2DC7C8;
        font-weight: bold;
    }
    .Live-con-con{
        padding-top: 1px;
    }
    .Live-con-con-head{
        position: relative;
        width: 90%;
        margin: 0 auto;
        margin-top: 20px;
        span{
            display: block;
            height: 30px;
            width: 100%;
            margin: 0 auto;
            font-size: 20px;
            color: #2DC7C8;
            font-weight: bold;
            border-left: 10px solid #2DC7C8;
            padding-left: 10px;
        }
    }
    .Live-con-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
        padding-top: 40px;
    }
    .Live-con-content>ul{
        display: flex;
        list-style: none;
        width: 100%;
        height: 30px;
        padding: 0;
        justify-content: flex-end;
        align-items: center;
        li{
            height: 30px;
            text-align: center;
            cursor: pointer;
            margin-left: 40px;
        }
    }
    .select{
        color: #2DC7C8;
        border-bottom: 2px solid #2DC7C8;
        font-weight: bold;
    }
    .Live-con-con-Lecd{
        position: relative;
        width: 90%;
        margin: 0 auto;
        ul{
            display: flex;
            width: 100%;
            height: auto;
            padding: 0;
            li{
                display: inline-block;
                width: 36%;
                height: 150px;
                border:2px solid rgba(71,206,207,1);
                border-radius:15px;
            }
        }
    }
    .Live-con-con-Lecd>ul>li:last-child{
        margin-left: 6%;
    }
    .Live-con-con-Lecd-div{
        position: relative;
        width: 100%;
        height: 80%;
        margin-top: 10%;
        div{
            display: block;
            width: 90%;
            height: 80%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 5%;
            label{
                color: #9A9A9A;
                font-size: 14px;
                // flex: 1;
                span{
                    font-size: 33px;
                    color: #2DC7C8;
                    font-weight: bold;
                    cursor: pointer;
                    margin-left: 14px;
                }
            }
        }
    }
    .Live-con-con-Lecd-div>span{
        display: block;
        width: 90%;
        height: 20%;
        text-align: left;
        margin-left: 5%;
        color: #3E3E3E;
        font-weight: bold;
        font-size: 18px;
    }
    .Live-buy>span{
        display: inline-block;
        width:99px;
        height:33px;
        background:rgba(45,199,200,1);
        border-radius:17px;
        text-align: center;
        line-height: 33px;
        font-size: 14px!important;
        color: #FFFFFF!important;
    }
    
    /*我的预约样式*/
    .Live-con-con-appointment{
        position: relative;
        width: 90%;
        height: auto;
        margin: 0 auto;
    }
    .Live-con-con-appointment-head{
        display: flex;
        width: 100%;
        margin-top: 40px;
        span{
            flex: 1;
        }
    }
    .Live-con-con-appointment-head>span:first-child{
        border-left: 10px solid #2DC7C8;
        padding-left: 10px;
        font-size: 20px;
        color: #2DC7C8;
        font-weight: bold;
    }
    .Live-con-con-appointment-head>span:last-child{
        text-align: right;
        color: #B7B7B7;
        font-size: 16px;
        cursor: pointer;
    }
    
    /*我的关注样式*/
    .Live-con-con-Focus{
        position: relative;
        width: 90%;
        height: auto;
        margin: 0 auto;
    }
    .Live-con-con-Focus-head{
        display: flex;
        width: 100%;
        margin-top: 40px;
        span{
            flex: 1;
        }
    }
    .Live-con-con-Focus-head>span:first-child{
        border-left: 10px solid #2DC7C8;
        padding-left: 10px;
        font-size: 20px;
        color: #2DC7C8;
        font-weight: bold;
    }
    .Live-con-con-Focus-head>span:last-child{
        text-align: right;
        color: #B7B7B7;
        font-size: 16px;
        cursor: pointer;
    }
    .Live-con-con-Focus-con{
        position: relative;
        width: 100%;
        padding-bottom: 100px;
        ul{
            display: flex;
            padding: 0;
            list-style: none;
            align-items: center;
        }
        li{
            display: flex;
            // height: 160px;
            background: #F1F1F1;
            border-radius:15px;
            width: 20%;
            margin-left: 2%;
            cursor: pointer;
            img{
                display: block;
                width: 72px;
                height: 72px;
                max-width: 40%;
                max-height: 50%;
                border-radius: 50px ;
                margin-top: 20px;
            }
        }
    }
    .Canceltheattention{
        width:40%!important;
        height:24px;
        background:rgba(45,199,200,1);
        border-radius:12px;
        margin-top: 20px!important;
        line-height: 24px;
        cursor: pointer;
        color: #ffffff;
    }
    .Live-con-con-Focus-con>ul>li{
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: left;
        flex-wrap: wrap;
        label{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            span{
                display: block;
                text-align: center;
                width: 100%;
                margin-top: 10px;
                font-size: 12px;
            }
        }
       
    }
    .Live-con-con-Focus-con>ul>li>label>span:first-child{
        font-weight: bold;
        font-size: 16px;
    }
    .Live-con-con-Focus-con>ul>li>label>span:last-child{
        font-size: 12px;
        margin-top: 4px;
    }
    .Live-con-con-Focus-con>ul>li:first-child{
        margin: 0;
    }
    /*轮播图样式*/
    // .Liveclassroom/deep/.swiper-container{
    //     width: 100%;
    // }
    /deep/.Suspensionbox{//在线客服样式只在本页面生效
        width: 100%!important;
    }
    /*助学师学习卡样式*/
    .Learnerscard{
        position: relative;
        width: 90%;
        margin: 0 auto;
    }
    .Learnerscard-title{
        display: flex;
        width: 100%;
        height: 40px;
        span{
            width: 30%;
            height: 20px;
            line-height: 20px;
            padding-left: 1%;
            color: #2DC7C8;
            border-left: 14px solid #2DC7C8;
            font-weight: bold;
        }
    }
    .Learnerscard-content{
        display: flex;
        padding: 0;
        width: 100%;
        list-style: none;
        justify-content: space-between;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .holder{
        width: 23%;
        // height: 150px;
        border:1px solid rgba(71,206,207,1);
        border-radius:8px;
        margin-top: 10px;
        opacity: 0;
    }
    .Learnerscard-content>li{
        width: 23%;
        // height: 150px;
        border:1px solid rgba(71,206,207,1);
        border-radius:8px;
        margin-top: 10px;
        label{
            position: relative;
            width: 80%;
            margin: 0 auto;
            display: flex;
            height: 30px;
            line-height: 30px;
            justify-items: center;
            span{
                font-size: 12px;
                width: 50%;
                text-align: left;
            }
            &:first-child{
                height: 60px;
                line-height: 60px;
                span{
                    &:first-child{
                        font-weight: bold;
                        font-size: 14px;
                        width: 70%;
                    }
                }
            }
            &:last-child{
                margin-bottom: 20px;
                span{
                    &:first-child{
                        color: #2DC7C8;
                        font-weight: bold;
                        font-size: 19px;
                    }
                    &:last-child{
                        width: 60%;
                        background:rgba(45,199,200,1);
                        border-radius:15px;
                        text-align: center;
                        cursor: pointer;
                        color: #ffffff;
                    }
                }
            }
        }
    }
    .More-rest{
        position: relative;
        width: 90%;
        margin: 0 auto;
        margin-top: 30px;
        justify-content: space-between;
        display: flex;
        div{
            width: 47%;
        }
    }
    .Summarylist{
        width: 50%;
    }
    .Summarylist>label,.Mycomments>label{
        display: flex;
        height: 20px;
        line-height: 20px;
        span{
            width: 50%;
            &:first-child{
                color: #2DC7C8;
                font-weight: bold;
                border-left: 14px solid #2DC7C8;
                font-size: 16px;
                padding-left: 2%;
            }
            &:last-child{
                text-align: right;
                color: #B7B7B7;
                cursor: pointer;
            }
        }
    }
    .Summarylist-content{
        display: flex;
        width: 100%;
        // height:140px;
        border:1px solid rgba(214,214,214,1);
        border-radius:15px;
        list-style: none;
        flex-wrap: wrap;
        padding: 0;
        li{
            width: 100%;
            height: 20px;
            line-height: 20px;
        }
    }
    .Summarylist-content>li>label{
        position: relative;
        width: 90%;
        margin: 0 auto;
        display: flex;
        height: 20px;
        align-items: center;
        font-size: 12px;
        &:first-child{
            margin-top: 10px;
        }
        span{
            width: 50%;
            height: 20px;
            line-height: 20px;
            color: #2D2D2D;
            &:first-child{
                font-weight: bold;
            }
            &:last-child{
                text-align: right;
                color: #A0A0A0;
            }
        }
    }
    .comments-Infos{
        height:140px;
        overflow-y: auto;
        border:1px solid rgba(214,214,214,1);
        border-radius:8px;
        list-style: none;
        padding: 0;
    }
    /*滚动条样式*/
    .comments-Infos::-webkit-scrollbar {
        width: 4px;    
    }
    .comments-Infos::-webkit-scrollbar-thumb{
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.2);
    }
    .comments-Infos::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0;
        background: rgba(0,0,0,0.1);
    }
    .comments-Infos-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
        h3{
            color: #404040;
        }
    }
    .coverimg{
        width: 40px!important;
        height: 40px!important;
    }
    .comments-Infos-content-head{
        display: flex;
        width: 100%;
        align-items: center;
        flex-wrap: wrap;
        h4{
            width: auto;
            margin-left: 2%;
            display: inline-block;
            // padding-left: 2%;
            color: #404040;
            font-weight: normal;
        }
        span{
            width: auto;
            margin-left: 4%;
            color: #BEBEBE;
            font-size: 12px;
        }
        p{
            display: block;
            width: 100%;
            margin: 0;
            color: #BEBEBE;
            font-size: 12px;
            padding-left: 14%;
        }
    }
    .Myteacher{
        position: relative;
        width: 90%;
        margin: 0 auto;
        margin-top: 30px;
        padding-bottom: 60px;
    }
    .Myteacher>label{
        display: flex;
        height: 20px;
        width: 100%;
        line-height: 20px;
        span{
            width: 20%;
            color: #2DC7C8;
            font-weight: bold;
            border-left: 14px solid #2DC7C8;
            font-size: 16px;
            padding-left: 1%;
        }
    }
    .Myteacher>ul{
        display: flex;
        width: 100%;
        list-style: none;
        padding: 0;
        // justify-content: space-between;
        li{
            width: 18%;
            height:auto;
            margin-left: 2%;
            background:rgba(241,241,241,1);
            border-radius:8px;
            &:first-child{
                margin: 0;
            }
        }
    }
    .Myteacherlist{
        // display: flex;
        // align-items: center;
        // flex-wrap: wrap;
        // justify-content: center;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: left;
        flex-wrap: wrap;
        img{
            // width: auto;
            // height: auto;
            // max-width: 50%;
            // max-height: 50%;
            // margin-top: 15px;
            // border-radius: 50px;
            display: block;
            width: 72px;
            height: 72px;
            max-width: 40%;
            max-height: 50%;
            border-radius: 50px;
            margin-top: 20px;
        }
        label{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            span{
                display: block;
                text-align: center;
                width: 100%;
                margin-top: 10px;
            }
            &:last-child{
                padding-bottom: 20px;
                span{
                    
                }
            }
        }
    }
    .Myteacherlist-nickname{
        font-weight: bold;
        color: #383838;
        font-size: 16px;
    }
    

    .Live-con-con-appointment-con{
        position: relative;
        width: 100%;
        padding-bottom: 40px;
        ul{
            display: flex;
            width: 100%;
            list-style: none;
            padding: 0;
            flex-wrap: wrap;
            justify-content: space-between;
            li{
                width: 48%;
                height: 200px;
                background: #ffffff;
                border:1px solid rgba(54,205,206,1);
                border-radius:5px;
                margin-top: 20px;
            }
        }
    }
    .Personalschedule-class-List-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
        display: flex;
        height: 100%;
        align-items: center;
    }
    .Personalschedule-class-List-content>label:first-child{
        width: 50%;
        border-radius: 15px;
        overflow: hidden;
        img{
            width: 70%;
        }
    }
    .Personalschedule-class-Info{
        width: 50%;
        height: 70%; 
        padding-left: 6%;
        h2{
            color: #555555;
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 0;
        }
        label{
            display: flex;
            // justify-content: space-between;
            font-size: 14px;
            height: 24px;
            line-height: 24px;
            margin-top: 8px;
            span{
                display: inline-block;
                width: auto;
                &:first-child{
                    width: auto;
                }
                &:last-child{
                    margin-left: 4%;
                    text-align: left;
                }
            }
        }
    }
    .Personalschedule-class-Info>.Personalschedule-class-Infos{
        display: flex;
        align-items: center;
        margin-top: 10px;
        img{
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 70%;
        }
    }
    .Isopenclasses{
        justify-content: flex-end;
        span{
            color: #2DC7C8;
            cursor: pointer;
        }
    }
    .Lvie-cl-de-con-pagination{
        position: relative;
        width: 100%;
        height: 100px;
        margin-bottom: 40px;
        display: flex;
        justify-content: flex-end;
        margin-right: 100px;
    }
    .Personalschedule-class-info-head{
        span{
            display:flex;
            overflow: hidden;
            color: #555555;
            font-size: 18px;
            font-weight: bold;
            margin-left: 0;
            text-align: left;
        }
    }
    .Personal-training>span{
        margin-left: 0!important;
        font-size: 16px;
        font-weight: bold;
    }
    .Personal-training-footer{
        display: flex;
        justify-content: flex-end;
        color: #2DC7C8;
        span{
            cursor: pointer;
        }
    }
    .nodatads{
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        img{
            width: 39px!important;
        }
        span{
            display: inline-block;
            width: 100%;
            text-align: center;
            margin-top: 10px;
            color: #e7e7e7;
        }
    }
    .Summarylist-nodatads{
        position: relative;
        width: 100%!important;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        label{
            width: 100%;
            text-align: center;
        }
        img{
            width: 39px!important;
            height: 39px!important;
            margin-top: 50px;
        }
        span{
            display: inline-block;
            width: 100%;
            text-align: center;
            margin-top: 10px;
            color: #e7e7e7;
        }
    }
</style>